<template>
  <div class="ProductsRelease">
    <h2 class="title" v-if="Statestype == ''">发布解决方案</h2>
    <h2 class="title" v-if="Statestype == 'edit'">解决方案编辑</h2>
    <h2 class="title" v-if="Statestype == 'look'">解决方案详情</h2>
    <div class="main">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <h3 class="form-title">基本信息</h3>
        <div class="mt-20">
          <a-form-model-item class="" label="解决方案名称" prop="solutionName">
            <a-input :disabled="Statestype == 'look'" v-model="form.solutionName" placeholder="请输入解决方案名称">

            </a-input>
          </a-form-model-item>

          <a-form-model-item class="textatea_input" label="简述" prop="sketch">
            <a-input :disabled="Statestype == 'look'" v-model="form.sketch" type="textarea" />
          </a-form-model-item>

        </div>
        <h3 class="form-title"><span style="color:red" class="mr-8">*</span>图片</h3>
        <a-form-model-item class="mt-20" label="" prop="solutionFile">
          <div class="img-box mr-20 f-left" v-for="(item,index) in form.solutionFile" :key="index">
            <img :src="wengeGetImageUrl(item.fileUrl)" alt="">
            <a-icon v-if="Statestype != 'look'" class="close" type="close-circle" @click="DelImag(item.id,index)" />
          </div>
          <div v-if="form.solutionFile.length<5" class="uploadlogo f-left">
            <div v-if="Statestype != 'look'">
              <a-upload list-type="picture-card" :action="UploadUrl" :headers="headers" :before-upload="beforeUpload" @change="handleChanger" :show-upload-list="false">
                <a-icon type="plus" />
                <div class="ant-upload-text">
                  上传图片
                </div>
              </a-upload>
              最多上传5张图片
            </div>
          </div>
        </a-form-model-item>

        <h3 class="form-title"><span style="color:red" class="mr-8">*</span>资质荣誉</h3>
        <a-form-model-item class="mt-20" label="" prop="honorFile">
          <div class="img-box mr-20 f-left" v-for="(item,index) in form.honorFile" :key="index">
            <img :src="wengeGetImageUrl(item.fileUrl)" alt="">
            <a-icon v-if="Statestype != 'look'" class="close" type="close-circle" @click="DelhonorFileImag(item.id,index)" />
          </div>
          <div v-if="form.honorFile.length<5" class="uploadlogo f-left">
            <div v-if="Statestype != 'look'">
              <a-upload list-type="picture-card" :action="UploadUrl" :headers="headers" :before-upload="honorbeforeUpload" @change="honorhandleChanger" :show-upload-list="false">
                <a-icon type="plus" />
                <div class="ant-upload-text">
                  上传图片
                </div>
              </a-upload>
              最多上传5张图片
            </div>
          </div>
        </a-form-model-item>
        <h3 class="form-title ">服务简介</h3>
        <a-form-model-item class="textatea_input mt-20" label="服务介绍" prop="serviceIntroduce">
          <a-input :disabled="Statestype == 'look'" v-model="form.serviceIntroduce" type="textarea" />
        </a-form-model-item>
        <a-form-model-item class="textatea_input" label="服务优势" prop="serviceAdvantage">
          <a-input :disabled="Statestype == 'look'" v-model="form.serviceAdvantage" type="textarea" />
          <p class="tips">多行使用分隔符（;）进行区分</p>
        </a-form-model-item>
        <a-form-model-item class="textatea_input" label="服务内容" prop="serviceContent">
          <a-input :disabled="Statestype == 'look'" v-model="form.serviceContent" type="textarea" />
          <p class="tips">多行使用分隔符（;）进行区分</p>

        </a-form-model-item>
         <h3 class="form-title ">服务保障</h3>
        <a-form-model-item class="textatea_input" label="服务保障" prop="serviceAssurance">
          <a-input :disabled="Statestype == 'look'" v-model="form.serviceAssurance" type="textarea" />
          <p class="tips">多行使用分隔符（;）进行区分</p>

        </a-form-model-item>
        <h3 class="form-title mb-20">联系方式</h3>
        <a-form-model-item class="" label="联系人" prop="contacts">
          <a-input :disabled="Statestype == 'look'" v-model="form.contacts" type="" />
        </a-form-model-item>
        <a-form-model-item class="" label="手机号码" prop="phone">
          <a-input :disabled="Statestype == 'look'" v-model="form.phone" type="" />
        </a-form-model-item>
        <a-form-model-item class="" label="电子邮箱" prop="email">
          <a-input :disabled="Statestype == 'look'" v-model="form.email" type="" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" v-if="Statestype==''" :loading="Submitloading" @click="onSubmit('add')">
            提交
          </a-button>
           <a-button class="mr-10" v-if="(Statestype == 'look' || Statestype == 'edit')" :loading="Submitloading" @click="backHome">
            返回
          </a-button>
          <a-button type="primary" v-if="Statestype=='edit'" :loading="Submitloading" @click="onSubmit('edit')">
            提交
          </a-button>
          <a-button v-if="!Statestype" style="margin-left: 10px;" @click="resetForm">
            清空
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>

  </div>
</template>

<script>
import moment from "moment";
import EditorBar from "@/components/wangEnduit/index.vue";
import { GetByParent } from "@/apis/user/MaterialsDemand";
import {
  AddUsersolutionInfo,
  getsolutionInfo,
  updatesolutionInfo,
} from "@/apis/user/solutionInfo";
import { getToken } from "@/utils/auth"; // get token from cookie
import { getEntBaseInfo } from "@/apis/user/EntBaseInfo";
export default {
  components: { EditorBar },
  data() {
    return {
      Statestype: "",
      Submitloading: false,
      UploadUrl: GolbUrl._BASE_URL_ + "wenge/microservice-supply-consumer-web/sysFile/upload",
      headers: {
        Authorization: getToken(),
      },
      id: "",
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: "",
      form: {
        solutionName: "",
        sketch: "",
        phone: "",
        email: "",
        contacts: "",
        serviceIntroduce: "",
        serviceContent: "",
        serviceAssurance: "",
        serviceAdvantage: "",
        honorFile: [],
        solutionFile: [],
      },
      rules: {
        solutionName: [
          {
            required: true,
            message: "请输入解决方案名称",
            trigger: "blur",
          },
        ],
        serviceAdvantage: [
          {
            required: true,
            message: "请输入服务优势",
            trigger: "blur",
          },
        ],
        serviceContent: [
          {
            required: true,
            message: "请输入服务内容",
            trigger: "blur",
          },
        ],
        serviceIntroduce: [
          {
            required: true,
            message: "请输入服务介绍",
            trigger: "blur",
          },
        ],
        serviceAssurance: [
          {
            required: true,
            message: "请输入服务保障",
            trigger: "blur",
          },
        ],
        solutionFile: [
          {
            required: true,
            message: "请上传图片",
            trigger: "blur",
          },
        ],
        honorFile: [
          {
            required: true,
            message: "请上传资质荣誉图片",
            trigger: "blur",
          },
        ],
        sketch: [
          {
            required: true,
            message: "请输入简述",
            trigger: "blur",
          },
        ],

        phone: [
          { required: true, message: "请输入手机号码" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱" },
          {
            pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
            message: "邮箱格式不正确",
          },
        ],
        contacts: [{ required: true, message: "请输入联系人" }],
      },
    };
  },
  created() {
    if (this.$route.query.id != undefined) {
      this.id = this.$route.query.id;
      this.getsolutionInfo();
    }
    if (this.$route.query.type) {
      this.Statestype = this.$route.query.type;
    } else {
    }
  },
  methods: {
    backHome() {
      this.$router.push("/usercenter/MyProgramme");
    },
    // 获取详情
    getsolutionInfo() {
      let _params = {
        id: this.$route.query.id,
      };
      getsolutionInfo(_params)
        .then((res) => {
          if (res.code == 200) {
            this.form = res.data;
          }
        })
        .catch((error) => {});
    },
    DelImag(id, index) {
      // console.log(id,index);
      this.form.solutionFile.splice(index, 1);
    },
    DelhonorFileImag(id, index) {
      // console.log(id,index);
      this.form.honorFile.splice(index, 1);
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.warning("请上传正确的文件格式");
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.warning("请上传5M以内的大小图片");
        return false;
      }
      return isJpgOrPng && isLt2M;
    },

    handleChanger(info) {
      console.log(info);
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.

        let _files = {
          fileName: info.file.response.data.fileName,
          fileType: info.file.response.data.fileType,
          fileUrl: info.file.response.data.fileUrl,
          objectType: 7, //1:产品图片
        };
        this.form.solutionFile.push(_files);
      }
    },

    honorbeforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.warning("请上传正确的文件格式");
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.warning("请上传5M以内的大小图片");
        return false;
      }
      return isJpgOrPng && isLt2M;
    },

    honorhandleChanger(info) {
      console.log(info);
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.

        let _files = {
          fileName: info.file.response.data.fileName,
          fileType: info.file.response.data.fileType,
          fileUrl: info.file.response.data.fileUrl,
          objectType: 8, //1:产品图片
        };
        this.form.honorFile.push(_files);
      }
    },
    // 添加解决方案
    AddUsersolutionInfo() {
      this.Submitloading = true;
      AddUsersolutionInfo(this.form)
        .then((res) => {
          this.Submitloading = false;
          if (res.code == 200) {
            this.$message.success("提交成功");
            setTimeout(() => {
              this.$router.push("/usercenter/MyProgramme");
            }, 500);
          } else {
            this.$message.error("提交失败");
          }
        })
        .catch((error) => {
          this.Submitloading = false;
          this.$message.warning("服务错误");
        });
    },

    // 修改
    updatesolutionInfo() {
      this.Submitloading = true;
      updatesolutionInfo(this.form)
        .then((res) => {
          this.Submitloading = false;
          if (res.code == 200) {
            this.$message.success("修改成功");
            setTimeout(() => {
              this.$router.push("/usercenter/MyProgramme");
            }, 500);
          } else {
            this.$message.error("修改失败");
          }
        })
        .catch((error) => {
          this.Submitloading = false;
          this.$message.warning("服务错误");
        });
    },
    onSubmit(type) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (type == "add") {
            this.AddUsersolutionInfo();
          }
          if (type == "edit") {
            this.updatesolutionInfo();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.ProductsRelease {
  background-color: #fff;
  padding: 32px 24px;
  .title {
    font-size: 22px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 17px;
    letter-spacing: 0px;
    color: #303133;
    padding-bottom: 14px;
    border-bottom: 1px solid #e9e9e9;
    font-weight: bold;
  }
  .form-title {
    margin-top: 16px;
    background-color: #f5f7fa;
    border-radius: 4px;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #303133;
    font-weight: bold;
    padding: 12px 16px;
  }
  .item_fw_title {
  }
}
.img-box {
  position: relative;
  border: 1px solid #e8e8e8;
  margin-bottom: 10px;
  width: 104px;
  height: 104px;
  img {
    width: 100%;
    height: 100%;
    // object-fit: cover;
  }
  &:hover {
    .close {
      display: block;
    }
  }
  .close {
    position: absolute;
    top: -10px;
    right: -10px;
    color: #fff;
    width: 20px;
    height: 20px;
    font-size: 20px;
    z-index: 99;
    background-color: red;
    border-radius: 100%;
    cursor: pointer;
    display: none;
  }
}
.textatea_input {
  .ant-input {
    min-height: 160px;
  }
}
</style>